ItIron2022
Javascript
從今天開始我們會進入一系列的vanilla javascript專案系列,也就是不透過前端框架或套件,單純利用HTML/CSS/Javascript打造的簡單專案,礙於篇幅的關係,其中許多專案我都會先將UI的部分處理好,在文章內我們就只探討javascript邏輯處理的部分! 一開始前幾天會盡量從簡單一點的專案下手,會需要一點DOM操作的基礎,不用緊張,任何人都能跟上的!
我們今天要做的是一個最基礎的計算機,預期的成果如下,樣式也相對簡單,我們這次就專注在邏輯的處理上,篇幅的關係我們今天就僅處理事前規劃的部分。
Step1: 專案結構
首先請你先建立一個新的資料夾,裡面包含index.html, style.css & script.js檔案。
專案結構如下圖所示。
html檔案請你寫入以下的內容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<link rel="stylesheet" href="./style.css">
<script src="./script.js" defer></script>
</head>
<body>
<div class="calculator">
<input class="display"></input>
<div class="btn dark clear">C</div>
<div class="btn dark sign">+/-</div>
<div class="btn dark module">%</div>
<div class="btn operator">/</div>
<div class="btn number">7</div>
<div class="btn number">8</div>
<div class="btn number">9</div>
<div class="btn operator">x</div>
<div class="btn number">4</div>
<div class="btn number">5</div>
<div class="btn number">6</div>
<div class="btn operator">-</div>
<div class="btn number">1</div>
<div class="btn number">2</div>
<div class="btn number">3</div>
<div class="btn operator">+</div>
<div class="btn zero number">0</div>
<div class="btn">.</div>
<div class="btn equal">=</div>
</div>
</body>
</html>
css檔案則請你寫入以下的內容,js的部份我們暫時先留空白沒關係。
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.calculator {
display: grid;
width: 340px;
margin: 0 auto;
font-size: 40px;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(50px, auto);
border: 0.3px solid #868383;
border-radius: 3rem;
padding: 0.8em;
background-color: #222;
gap: 10px;
}
.display {
grid-column: 1/5;
background-color: lightblue;
text-align: right;
padding-right: 20px;
background-color: #d3d3d3;
color: #333;
margin-bottom: 10px;
border-radius: 16px;
outline: 0;
font-size: 36px;
}
.btn {
border: 1px solid black;
background-color: #999;
cursor: pointer;
border-radius: 40px;
color: #222;
font-weight: bold;
text-align: center;
transition: background-color 0.2s ease-in;
}
.btn:hover {
background-color: #868383;
}
.dark {
background-color: #333;
color: #ffffff;
}
.operator {
background-color: #e08d1f;
}
.zero {
grid-column: 1/3;
}
Step2: 事前規劃
老樣子,請養成動手前先好好思考過一次的習慣,我們今天要做計算功能的話,大致上會需要以下幾個元素。
比方說我今天要做1 + 2 = 3,那麼1就是之前的數字,+則是運算符,2則是現在的數字,按下=之後則要將三者合一最終算出3這個結果。
另外有一點你需要注意,在你按下任何運算符之後,畫面上呈現的數字就是現在的數字,之前的數字必須要儲存起來並清空顯示的區塊,我們還需要一個額外的變數來儲存運算符是否點擊過,且運算符的值會是一個函數,因此需要再另一個變數去描述每個運算符對應的運算函數,最終我們需要以下六個元素。
理解這些後我們先完成初步的結構,請你將以下的內容寫進script.js內
const displayBar = document.querySelector(".display"); // 顯示結果的元素
const calculator = document.querySelector(".calculator"); // 計算機body
const operatorMapping = {
"+": (a, b) => a + b,
"-": (a, b) => a - b,
"x": (a, b) => a * b,
"/": (a, b) => a / b,
};
let operatorClicked = false;
let previousResult = "";
let operator;
function handleBtnClick (e) {
// 暫時留空
}
// 建立監聽器
calculator.addEventListener("click", handleBtnClick);
我們今天先完成了計算機的UI以及js檔案的基本結構處理,在這幾天專案我們節奏會放得稍微慢一些,各位可以放輕鬆一點! 明天就會進入最後的功能實作,你也可以先想一下根據目前的結構你要怎麼實現四則運算的處理!
文章中的範例程式碼可以在這邊取得,歡迎自行取用
Danny,我終於把課都上完了! 現在要開始準備進入求職的階段,很多人跟我說履歷上不用放作品集也沒關係,這是真的嗎?
是,但也不是。我並不是在講幹話,但這種情況因人而異,不過假設你是第一次找工程師的工作且你並不是本科系出身,我強烈建議一定要放作品集,否則你沒有任何方式證明你的能力。
履歷上的作品集我個人認為跟學歷一樣,有一定的參考價值但主要還是一個敲門磚,當你有實際的相關工作經歷後是否要放我就覺得可有可無了,至於你要放什麼作品則跟你求職的方向有關係! 一般來說如果是AC的學生我都會建議放一個協作專案、一個全端專案以及一個前/後端專案,我個人並不推薦你直接把課程內的作業當作主打的作品之一,因為這麼一來你的履歷同質性會非常高,你與相同課程出來的同學在履歷上幾乎一致,這麼一來要脫穎而出自然更為困難一些! 花一點時間打造一些獨立的作品對於你的求職會有較為正向的幫助,想要好一點的工作這種工夫我是建議不要省。
本文章同步發布於個人部落格,有興趣的朋友也可以來逛逛~!